<template>
  <!-- 创建一个全屏的容器，隐藏溢出内容，使用flex布局 -->
  <div style="width: 100vw; height: 100vh; overflow: hidden; display: flex">
    <!-- 左侧图片区域，使用element-ui的图片组件，充满整个区域 -->
    <div style="flex: 1">
      <el-image style="width: 99%; height: 99.5%" fit="cover" :src="imageSrc"></el-image>
    </div>
    <!-- 中间欢迎文本区域 -->
    <div class="welcome-title">
      <!-- 主标题 -->
        <div style="font-size: 40px; font-weight: bold">欢迎畅游36k小说网站</div>
        <!-- 副标题，描述网站的功能 -->
        <div style="margin-top: 20px; font-size: 20px;">于这片文字花园中，细品百态故事风景，沉醉于想象编织的温柔世界</div>
        <div style="margin-top: 5px;font-size: 20px;">以书页为纽带，遇见心意相通的读者，让共鸣在字里行间悄悄生长</div>
    </div>
    <!-- 右侧卡片容器，用于展示路由组件 -->
    <div class="right-card">
      <!-- 路由视图，用于渲染匹配的路由组件 -->
      <router-view v-slot="{ Component }">
        <!-- 过渡动画，用于路由组件的淡入淡出效果 -->
        <transition name="el-fade-in-linear" mode="in-out">
          <!-- 动态组件，根据路由匹配结果渲染相应的组件 -->
          <component :is="Component" style="height: 100%"/>
        </transition>
      </router-view>
    </div>
    </div>

</template>

<script>
export default {
  data() {
    return {
      // 图片源地址，使用高分辨率图片作为背景
      imageSrc: 'https://img.qieyou.com/article/20250302/87b9097dc2fb7e118d079bf12d996c3f.jpg'
    };
  }
};
</script>


<style>
/* 定义右侧卡片的样式 */
.right-card {
  /* 设置卡片宽度为400像素 */
  width: 400px;
  /* 设置z-index值为1，以控制叠放层级 */
  z-index: 1;
  /* 设置背景颜色为白色 */
  background-color: var(--el-bg-color);
}

/* 欢迎标题样式 */
.welcome-title {
  /* 设置为绝对定位，以便根据父元素定位 */
  position: absolute;
  /* 距离底部30px，用于调整标题在垂直方向上的位置 */
  bottom: 30px;
  /* 距离左侧30px，用于调整标题在水平方向上的位置 */
  left: 30px;
  /* 设置文本颜色为黑色，以适应深色背景 */
  color: black;
  /* 添加文本阴影，增强标题的视觉效果和可读性 */
  text-shadow: 0 0 10px black;
}
/*.el-fade-in-linear-enter-active,*/
/*.el-fade-in-linear-leave-active {*/
/*  transition: opacity 0.3s linear;*/
/*}*/
/*.el-fade-in-linear-enter,*/
/*.el-fade-in-linear-leave-to {*/
/*  opacity: 0;*/
/*}*/
</style>
